<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>review1</title>
</head>
<body>
    <div>
        br和p的作用：br换行，p换段
        块级标签:可以独占一行h1~h6,p,div
        行级标签：不独占一行a input span
        <div>我是一个div</div><br>
    <div>我是一个div</div><br>
    <div>我是一个div</div><br>
    <p>
        <div>我是一个div</div><br>
    <div>我是一个div</div><br>
    </p>
    <p>hello div</p>
    
    </div>


    <div> 
        <div>
注意，图片地址可以写文件或者网络的地址。绝对路径，相对路径<br/>
注意，以下几种写法是错误的，在HTML中，标签的属性像border、color等是独立的，且border通常是一个CSS样式属性，而不是HTML标签中的一个单独属性。
所以应用style属性写,这里下面是第一种写的方式，标签内部写
而且不能用逗号连接，应该用空格连接。
相对地址<img src="../../../../../../home/SuperMario/src/images/bg.png" width="500px" ,border="500px",color="red"  ><br>
绝对地址<img src="C:\Users\wujia\Pictures\Screenshots\CT-20240904031333.png" ,border="500px",color=blue><br>
网络地址 <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.zhn74pldZAo0VZH-RW_5IgHaE7&w=306&h=204&c=8&rs=1&qlt=90&r=0&o=6&dpr=2.3&pid=3.1&rm=2" 
,border: 500px solid red;
></div>

<div>
相对地址<img src="../../../../../../home/SuperMario/src/images/bg.png" width="500px" style="border: 5px solid red"  ><br>
绝对地址<img src="C:\Users\wujia\Pictures\Screenshots\CT-20240904031333.png" width="500px" style="border:5px solid blue"><br>
网络地址 <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.zhn74pldZAo0VZH-RW_5IgHaE7&w=306&h=204&c=8&rs=1&qlt=90&r=0&o=6&dpr=2.3&pid=3.1&rm=2" 
height="100"
style="border: 5px solid red";>
</div>
</div>

<div>
    跳转链接
    <a href="https://chat18.aichatos10.com/#/chat/1731041130985">AI</a>
    <br>
    <a href="#">空链接</a>
    <br>
    <a href="1.html" target="_blank">点我跳转到1.html</a>
</div>


<div>
   
     <!-- <table>这个表是没有边框的，边框需要通过table设定,p标签内不能嵌套表格标签

        <style>style有三种方式，下面是第二种方式，把属性单独提出来写
           p{
                color:red;
                font-size: 30px;
            }
        </style>
        <tr>
            <td><p>姓名</p></td>
            <td>linda</td>
            <td>学号</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>密码</td>
            <td>123</td>
        </tr>
        
    </table> -->

    <!-- 画表格<br>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
    height="100">
    <style>style建议放在head里面，因为代码从上到下加载，放在下面可能会没加载完就渲染画面
        td{
             color:red;
             font-size: 30px;
         }
     </style>
        <tr>
                 <td>姓名</td>
        
            <td><input type="text" placeholder="请输入姓名"></td>
            <td>学号</td>
            <td><input type="text" placeholder="请输入学号"></td>
        
           
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
       
    </table> <div>
            <button>注册</button>
            <span>已有账号?</span>
            <a href="#">登录</a>
        </div> -->



     <!-- 画表格<br>第三种方式，把style放在新的文件，链接过去
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
    height="100">
    这一步<link rel="stylesheet" href="style.css">
    style建议放在head里面，因为代码从上到下加载，放在下面可能会没加载完就渲染画面

        <tr>
                 <td>姓名</td>
        
            <td><input type="text" placeholder="请输入姓名"></td>
            <td>学号</td>
            <td><input type="text" placeholder="请输入学号"></td>
        
           
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
       
    </table> <div>
            <button>注册</button>
            <span>已有账号?</span>
            <a href="#">登录</a> -->
        </div> 
</div>


<div>
    <!-- <br>
    <br>
    登录练习<br>
      
        用户名<input type="text" size="30" ><br>
        密码<input type="password" ><br>
        性别<input type="radio" name="gender" id="gender1">男
        <input type="radio"  name="gender" id="gender2">女
        <input type="radio"  name="gender" id="gender3">其他
       

<br> -->
     登录练习<br>
      <form action="test1/1.html" method="get">
      用户名<input type="text" size="30" name="username" ><br>
      密码<input type="password" name="password"><br>
      性别<input type="radio" name="gender" id="gender1" value="1">
      <label for="gender1">男</label>

      <input type="radio"  name="gender" id="gender2" value="2">
      <label for="gender2">女</label>

      <input type="radio"  name="gender" id="gender3" value="3">
    <label for="gender3">其他</label>
    <br>

    兴趣<input type="checkbox" name="hobby" id="hobby1" value="1">篮球
    <input type="checkbox" name="hobby" id="" value="2">足球
    <input type="checkbox" name="hobby" id="" value="3">排球
    <input type="checkbox" name="hobby" id="" value="4">水球
<!-- <input type="button" value="按钮"> -->
 专业：<select name="major" >
    <option name="major" value="1">计算机科学与技术</option>
    <option name="major" value="2">软件工程</option>
    <option name="major" value="3" selected>人工智能</option>
 </select>

 个人描述：
 <textarea rows="4" cols="5">个人描述</textarea>
<input type="submit" value="提交">
</form>


</div>
   


   

</body>